<template>
  <!-- 风险广告处理日志 -->
  <div class="handle-risk-log-wrap">
    <div class="flex-c">
      <a-form :model="formVal" size="small">
        <a-row>
          <a-col :span="5">
            <a-form-item field="operationsUserName" label="处理人" label-col-flex="60px">
              <a-input v-model="formVal.operationsUserName" allow-clear placeholder="" @change="getOperationsDetail" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="timeVal" label="处理时间" label-col-flex="80px">
              <a-range-picker v-model="formVal.timeVal" shortcuts-position="left" valueFormat="YYYY-MM-DD HH:mm:ss" :timePickerProps="{ defaultValue: ['00:00:00', '23:59:59'] }" :shortcuts="rangeShortcuts()" style="width: 260px" @change="getOperationsDetail" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-spin class="log-w" :loading="getLoading">
      <a-empty v-if="!logList.length" />
      <div class="log-item" v-for="(item, i) in logList" :key="i">
        <div class="header">
          <span style="margin-right: 30px">处理人：{{ item.createUserName || '--' }}</span>
          <span style="margin-right: 20px">处理时间：{{ $setTime(item.snapshotDateTime) }}</span>
        </div>
        <div class="item-con">
          <div class="flex" style="margin-bottom: 5px">
            <p class="label">处理方式：</p>
            <p>
              <span>{{ OperationsType[item.operationsType] || item.operationsType || '--' }}</span>
              <span v-if="item.operationsType == 'ADJUST'">，{{ getOperationsAdjustDetail(item) }}</span>
            </p>
          </div>
          <div class="flex">
            <p class="label">备注：</p>
            <p>{{ item.remarks }}</p>
          </div>
        </div>
        <ul class="footer">
          <li v-for="(column, j) in columns" :key="j">
            <span>{{ column.title }}</span>
            <span>=</span>
            <span v-if="column.type == 'price'">$</span>
            <span>{{ item[column.key] }}</span>
            <span v-if="column.type == 'percent'">%</span>
          </li>
        </ul>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { operationsDetail } from '@/api/advert'
  import { rangeShortcuts } from '@/utils/timeFormat'
  import { OperationsType, OperationsAdjustDetailType } from '../../types'

  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  const columns = [
    {
      title: '曝光',
      key: 'impressions',
    },
    {
      title: '点击',
      key: 'clicks',
    },
    {
      title: 'CTR',
      key: 'ctr',
      type: 'percent',
    },
    {
      title: '花费',
      key: 'cost',
      type: 'price',
    },
    {
      title: 'CPC',
      key: 'cpc',
      type: 'price',
    },
    {
      title: 'CVR',
      key: 'cvr',
      type: 'percent',
    },
    {
      title: 'CPA',
      key: 'cpa',
      type: 'price',
    },
    {
      title: '广告订单',
      key: 'purchasesOrder',
    },
    {
      title: '广告销量',
      key: 'purchasesSale',
    },
    {
      title: '广告销售额',
      key: 'saleAmount',
      type: 'price',
    },
    {
      title: 'ACOS',
      key: 'acos',
      type: 'percent',
    },
    {
      title: 'ROAS',
      key: 'roas',
    },
  ]
  const formVal = ref<any>({})
  const logList = ref<Array<any>>([])
  const getLoading = ref(false)

  // 获取处理日志
  async function getOperationsDetail() {
    getLoading.value = true
    let res: any = await operationsDetail({
      operationsUserName: formVal.value.operationsUserName,
      processStartDateTime: formVal.value.timeVal?.[0],
      processEndDateTime: formVal.value.timeVal?.[1],
      riskUniqueInfo: {
        adType: props.currentData.adType,
        campaignId: props.currentData.campaignId,
        companyId: props.currentData.companyId,
        resourceId: props.currentData.resourceId,
        shopId: props.currentData.shopId,
        targetingType: props.currentData.targetingType,
      },
    })
    getLoading.value = false
    logList.value = res?.data || []
  }
  getOperationsDetail()

  // 广告调整明细显示
  function getOperationsAdjustDetail(row: any) {
    row.operationsAdjustDetail
    let arr = row.operationsAdjustDetail?.split(',') || []
    let newArr = arr.map((val: string) => {
      return OperationsAdjustDetailType[val] || 'val'
    })
    return newArr.join(',')
  }
</script>

<style lang="less" scoped>
  .handle-risk-log-wrap {
    height: 100%;
    overflow: hidden;
    .arco-form-item {
      margin-bottom: 10px;
    }
    .log-w {
      width: 100%;
      height: calc(100% - 50px);
      overflow-y: auto;
      .log-item {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        font-size: 14px;
        box-shadow: 0 0 3px #ddd;
        max-width: 800px;
        .header {
          background-color: #f2f2f2;
          padding: 4px 10px;
          border-bottom: 1px solid #ddd;
        }
        .item-con {
          padding: 10px;
          .label {
            flex-shrink: 0;
            text-align: right;
            width: 80px;
          }
        }
        .footer {
          background-color: #f8f8f8;
          display: flex;
          flex-wrap: wrap;
          border-top: 1px solid #ddd;
          padding: 0 10px;
          font-size: 12px;
          color: #666;
          li {
            width: 16.6%;
            line-height: 24px;
          }
        }
      }
    }
  }
</style>
